<template>

  <tab-bar>
    <tab-bar-item path="/home">
      <span slot="item-icon" class="iconfont icon-shouye"></span>
      <span slot="item-name">首页</span>
    </tab-bar-item>
    <tab-bar-item path="/category">
      <span slot="item-icon" class="iconfont icon-fenlei"></span>
      <span slot="item-name">分类</span>
    </tab-bar-item>
    <tab-bar-item path="/cart">
      <span slot="item-icon" class="iconfont icon-gouwuche car">
      </span>
      <div class="item-count" slot="item-count" v-if="allCart">{{allCart}}</div>
      <span slot="item-name">购物车</span>
    </tab-bar-item>
    <tab-bar-item path="/user">
      <span slot="item-icon" class="iconfont icon-wode"></span>
      <div slot="item-name">我的</div>
    </tab-bar-item>
  </tab-bar>

</template>
<script>
import { tabBar, tabBarItem } from 'components/common/tabbar/index'


export default {
  name: 'mainTabBar',
  components: {
    tabBar,
    tabBarItem
  },
  computed: {
    allCart() {
      if (window.sessionStorage.getItem('token')) {
        return this.$store.getters.allCart.allCount
      } else {
        return 0
      }
    }
  }
}
</script>
<style lang="scss" scope>
.item-count {
  position: absolute;
  right: 26%;
  top: 0;
  display: block;
  min-width: 10px;
  height: 15px;
  line-height: 15px;
  background-color: red;
  padding: 0 4px;
  font-size: 12px;
  color: #fff;
  border-radius: 20px;
}
</style>
